import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { Dialog, Toast, Popup } from 'antd-mobile';
import axios from 'axios';
import { getUsername, getUserInfo, getUserId } from '../utils/auth';
import { http, host, port } from '../utils/host'
import { LeftOutline } from 'antd-mobile-icons'

// 定义动态接口
interface Dongtai {
  _id: string;
  userId: string;
  username: string;
  content: string;
  images?: string[];
  video?: string;
  likeCount: number;
  commentCount: number;
  shareCount: number;
  publishTime: string;
  // 其他动态相关字段
}

// 定义评论接口
interface Comment {
  _id: string;
  userId: string;
  username: string;
  content: string;
  createdAt: string;
  likeCount: number;
  // 其他评论相关字段
}

// 定义用户信息接口
interface UserInfo {
  userId: string;
  username: string;
  avatarImage?: string;
  // 其他用户相关字段
}

const DongtaiDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [dongtai, setDongtai] = useState<Dongtai | null>(null);
  const [comments, setComments] = useState<Comment[]>([]);
  const [loading, setLoading] = useState<boolean>(true);
  const [commentContent, setCommentContent] = useState<string>('');
  const [showCommentDialog, setShowCommentDialog] = useState<boolean>(false);
  const [topicMap, setTopicMap] = useState<Record<string, string>>({});
  // 点赞状态
  const [liked, setLiked] = useState<boolean>(false);
  // 当前用户信息
  const [currentUser, setCurrentUser] = useState<UserInfo | null>(null);
  // 分享功能状态
  const [showSharePopup, setShowSharePopup] = useState<boolean>(false);
  const [currentDongtaiId, setCurrentDongtaiId] = useState<string>('');
  // 评论点赞状态
  const [commentLiked, setCommentLiked] = useState<Record<string, boolean>>({});

  // 获取动态详情
  const fetchDongtaiDetail = async (): Promise<void> => {
    try {
      const response = await axios.get(`${http}${host}${port}/dongtai/getDongtaiDetail?id=${id}`);
      setDongtai(response.data);
      setCurrentDongtaiId(id);
      checkLikedStatus(id);
      fetchComments();
      fetchTopics();
    } catch (error) {
      console.error('获取动态详情失败:', error);
      Toast.show({ content: '获取动态详情失败', type: 'fail', position: 'center' });
    } finally {
      setLoading(false);
    }
  };

  // 获取评论
  const fetchComments = async (): Promise<void> => {
    try {
      const response = await axios.get(`${http}${host}${port}/dongtai/getComments?dongtaiId=${id}`);
      setComments(response.data);
    } catch (error) {
      console.error('获取评论失败:', error);
    }
  };

  // 获取话题数据
  const fetchTopics = async (): Promise<void> => {
    try {
      const response = await axios.get(`${http}${host}${port}/hua/detail`);
      const map = {};
      response.data.forEach(topic => {
        map[topic._id] = topic.title;
      });
      setTopicMap(map);
    } catch (error) {
      console.error('获取话题失败:', error);
    }
  };

  // 格式化时间差
  const formatTimeDifference = (publishTime: string): string => {
    if (!publishTime) return '';

    const now = new Date();
    const publishDate = new Date(publishTime);
    const diffInSeconds = Math.floor((now - publishDate) / 1000);

    const secondsInMinute = 60;
    const secondsInHour = secondsInMinute * 60;
    const secondsInDay = secondsInHour * 24;
    const secondsInMonth = secondsInDay * 30;
    const secondsInYear = secondsInDay * 365;

    if (diffInSeconds < secondsInMinute) {
      return `${diffInSeconds}秒前`;
    } else if (diffInSeconds < secondsInHour) {
      return `${Math.floor(diffInSeconds / secondsInMinute)}分钟前`;
    } else if (diffInSeconds < secondsInDay) {
      return `${Math.floor(diffInSeconds / secondsInHour)}小时前`;
    } else if (diffInSeconds < secondsInMonth) {
      return `${Math.floor(diffInSeconds / secondsInDay)}天前`;
    } else if (diffInSeconds < secondsInYear) {
      return `${Math.floor(diffInSeconds / secondsInMonth)}个月前`;
    } else {
      return `${Math.floor(diffInSeconds / secondsInYear)}年前`;
    }
  };

  // 提交评论
  const submitComment = async (): Promise<void> => {
    if (!commentContent.trim()) {
      Toast.show({ content: '评论内容不能为空', type: 'fail', position: 'center' });
      return;
    }

    try {
      // 添加日志输出，检查用户信息
      console.log('用户ID:', getUserId());
      console.log('用户名:', getUsername());
      console.log('评论内容:', commentContent);
      console.log('动态ID:', id);

      // 使用当前登录用户信息提交评论
      const userId = getUserId();
      const username = getUsername();

      console.log('提交评论用户信息:', {
        userId,
        username
      });

      if (!userId || !username) {
        Toast.show({ content: '请先登录', type: 'fail', position: 'center' });
        return;
      }

      const response = await axios.post(`${http}${host}${port}/dongtai/comment`, {
        dongtaiId: id,
        content: commentContent,
        username,
        userId
      });

      console.log('评论成功响应:', response.data);

      // 创建新评论对象，模拟实时添加
      const newComment = {
        _id: Date.now().toString(), // 临时ID
        username: getUsername(),
        userId: getUserId(),
        content: commentContent,
        createdAt: new Date().toISOString(),
        likeCount: 0,
        avatarImage: currentUser?.avatarImage || 'default-avatar.png'
      };

      // 立即添加到评论列表开头
      setComments(prevComments => [newComment, ...prevComments]);

      setCommentContent('');
      setShowCommentDialog(false);

      // 仍调用fetchComments确保数据一致性，但设置短暂延迟
      setTimeout(fetchComments, 500);

      // 更新动态评论数
      setDongtai(prev => ({
        ...prev,
        commentCount: response.data.commentCount
      }));

      Toast.show({ content: '评论成功', type: 'success', position: 'center' });
    } catch (error) {
      console.error('评论失败:', error);
      Toast.show({ content: '评论失败，请重试', type: 'fail', position: 'center' });
    }
  };

  // 获取当前用户信息
  useEffect(() => {
    const user = getUserInfo();
    setCurrentUser(user);
  }, []);

  // 检查点赞状态
  const checkLikedStatus = async (dongtaiId: string): Promise<void> => {
    if (!currentUser) return;

    try {
      const response = await axios.get(`${http}${host}${port}/dongtai/getLikedStatus?dongtaiId=${dongtaiId}`);
      setLiked(response.data.isLiked);
    } catch (error) {
      console.error('检查点赞状态失败:', error);
    }
  };

  // 初始加载数据
  // 已经在上方有相同功能的useEffect，这里删除重复的


  // 处理评论点赞/取消点赞
  const handleCommentLike = async (commentId: string): Promise<void> => {
    if (!currentUser) {
      Toast.show({ content: '请先登录', type: 'fail', position: 'center' });
      return;
    }

    try {
      const response = await axios.post(`${http}${host}${port}/dongtai/commentLike`, {
        commentId,
        like: !commentLiked[commentId]
      });

      // 更新评论点赞状态
      setCommentLiked(prev => ({
        ...prev,
        [commentId]: !prev[commentId]
      }));

      // 更新评论列表中的点赞数
      setComments(prevComments =>
        prevComments.map(comment =>
          comment._id === commentId
            ? { ...comment, likeCount: response.data.likeCount }
            : comment
        )
      );

      Toast.show({
        content: commentLiked[commentId] ? '已取消点赞' : '点赞成功',
        type: 'success',
        position: 'center'
      });
    } catch (error) {
      console.error('评论点赞操作失败:', error);
      Toast.show({ content: '操作失败，请重试', type: 'fail', position: 'center' });
    }
  };

  // 处理点赞/取消点赞
  const handleLike = async () => {
    if (!currentUser) {
      Toast.show({ content: '请先登录', type: 'fail', position: 'center' });
      return;
    }

    try {
      const response = await axios.post(`${http}${host}${port}/dongtai/like`, {
        dongtaiId: currentDongtaiId,
        like: !liked
      });

      // 更新点赞状态
      setLiked(!liked);

      // 更新动态的点赞数量
      setDongtai(prev => ({
        ...prev,
        likeCount: response.data.likeCount
      }));

      Toast.show({ content: liked ? '已取消点赞' : '点赞成功', type: 'success', position: 'center' });
    } catch (error) {
      console.error('点赞操作失败:', error);
      Toast.show({ content: '操作失败，请重试', type: 'fail', position: 'center' });
    }
  };

  // 打开分享弹窗
  const openSharePopup = () => {
    setShowSharePopup(true);
  };

  // 关闭分享弹窗
  const closeSharePopup = () => {
    setShowSharePopup(false);
  };

  // 执行分享操作
  const handleShare = async (type) => {
    try {
      // 更新分享计数
      const response = await axios.post(`${http}${host}${port}/dongtai/share`, {
        dongtaiId: currentDongtaiId
      });

      // 更新动态的分享数量
      setDongtai(prev => ({
        ...prev,
        shareCount: response.data.shareCount
      }));

      // 生成分享链接
      const shareUrl = `${http}${host}${port}/dongtai/${currentDongtaiId}`;
      const shareTitle = '分享一条动态';

      // 根据分享类型执行不同操作
      switch (type) {
        case 'wechat':
          // 微信分享
          if (window.wx) {
            wx.showMenuItems({
              menuList: ['menuItem:share:appMessage'], // 分享给朋友
            });
            wx.onMenuShareAppMessage({
              title: shareTitle,
              link: shareUrl,
              imgUrl: `${http}${host}${port}/logo.png`,
              success: function () {
                Toast.show({ content: '微信分享成功', type: 'success', position: 'center' });
              },
              cancel: function () {
                Toast.show({ content: '取消微信分享', type: 'none', position: 'center' });
              }
            });
          } else {
            // 没有微信SDK时，提供复制链接方案
            await navigator.clipboard.writeText(shareUrl);
            Toast.show({ content: '链接已复制，请在微信中粘贴分享', type: 'success', position: 'center' });
          }
          break;
        case 'weibo':
          // 微博分享
          const weiboShareUrl = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(shareTitle)}`;
          window.open(weiboShareUrl, '_blank');
          Toast.show({ content: '正在跳转到微博', type: 'success', position: 'center' });
          break;
        case 'copy':
          // 复制链接到剪贴板
          await navigator.clipboard.writeText(shareUrl);
          Toast.show({ content: '分享链接已复制到剪贴板', type: 'success', position: 'center' });
          break;
        case 'more':
          // 更多分享选项
          if (navigator.share) {
            navigator.share({
              title: shareTitle,
              url: shareUrl
            }).then(() => {
              Toast.show({ content: '分享成功', type: 'success', position: 'center' });
            }).catch((err) => {
              console.error('分享失败:', err);
              Toast.show({ content: '分享失败', type: 'fail', position: 'center' });
            });
          } else {
            await navigator.clipboard.writeText(shareUrl);
            Toast.show({ content: '链接已复制，请手动分享', type: 'success', position: 'center' });
          }
          break;
        default:
          await navigator.clipboard.writeText(shareUrl);
          Toast.show({ content: '分享链接已复制到剪贴板', type: 'success', position: 'center' });
      }

      closeSharePopup();
    } catch (error) {
      console.error('分享操作失败:', error);
      Toast.show({ content: '分享失败，请重试', type: 'fail', position: 'center' });
    }
  };

  useEffect(() => {
    fetchDongtaiDetail();
  }, [id]);

  if (loading) {
    return (
      <div style={styles.loadingState}>
        <div style={styles.spinner}></div>
        <p style={styles.loadingText}>加载中...</p>
      </div>
    );
  }
  if (!dongtai) {
    return (
      <div style={styles.emptyState}>
        <p style={styles.emptyText}>动态不存在或已被删除</p>
        <button style={styles.backButton} onClick={() => navigate(-1)}>返回</button>
      </div>
    );
  }

  return (
    <div style={styles.container}>
      {/* 顶部导航 */}
      <div style={styles.header}>
        <span style={styles.backIcon} onClick={() => navigate(-1)}><LeftOutline /></span>
        <h1 style={styles.title}>动态详情</h1>
        <span style={styles.placeholder}></span>
      </div>

      {/* 动态内容 */}
      <div style={styles.dongtaiContent}>
        <div style={styles.userInfo}>
          <img
            src={dongtai.avatarImage || 'default-avatar.png'}
            alt={dongtai.username}
            style={styles.avatar}
            onClick={() => navigate(`/user-detail/${dongtai.userId}`)}
            onError={(e) => {
              // 如果本地存储的头像加载失败，回退到默认头像
              (e.target as HTMLImageElement).src = "";
            }}
          />
          <div style={styles.userInfoText}>
            <div style={{ ...styles.userName, cursor: 'pointer' }} onClick={() => navigate(`/user-detail/${dongtai.userId}`)}>{dongtai.username}</div>
            <div style={styles.publishTime}>{dongtai.createdAt}</div>
          </div>
        </div>
        <p style={styles.content}>{dongtai.title}</p>

        {/* 媒体内容 */}
        {dongtai.media && dongtai.media.length > 0 && (
          <div style={styles.mediaContainer}>
            {dongtai.media.map((mediaUrl, index) => {
              // 假设media存储的是完整URL或相对于uploads目录的路径
              const fullMediaUrl = mediaUrl.startsWith('http') ? mediaUrl : `${http}${host}${port}${mediaUrl}`;
              const isVideo = fullMediaUrl.endsWith('.mp4') || fullMediaUrl.endsWith('.mov') || fullMediaUrl.endsWith('.webm');

              if (isVideo) {
                return (
                  <video
                    key={index}
                    src={fullMediaUrl}
                    alt=""
                    style={styles.mediaVideo}
                    controls
                    loop
                    muted
                    playsInline
                  />
                );
              } else {
                return (
                  <img
                    key={index}
                    src={fullMediaUrl}
                    alt=""
                    style={styles.mediaImage}
                  />
                );
              }
            })}
          </div>
        )}

        {/* 话题展示 */}
        {dongtai.huaId && topicMap[dongtai.huaId] && (
          <div style={styles.topicTag}>
            # {topicMap[dongtai.huaId]}
          </div>
        )}

        <div style={styles.interactionBar}>
          <span style={{ ...styles.interactionIcon, cursor: 'pointer' }} onClick={handleLike}>
            <span style={{ color: liked ? '#FF6B6B' : '#333' }}>👍</span> {dongtai.likeCount}
          </span>
          <span style={{ ...styles.interactionIcon, cursor: 'pointer' }} onClick={() => setShowCommentDialog(true)}>💬 {dongtai.commentCount}</span>
          <span style={{ ...styles.interactionIcon, cursor: 'pointer' }} onClick={openSharePopup}>🔄 {dongtai.shareCount}</span>
        </div>
      </div>

      {/* 分享弹窗 */}
      <Popup
        visible={showSharePopup}
        onClose={closeSharePopup}
        position="bottom"
        bodyStyle={{ height: 'auto', padding: '20px', borderRadius: '16px 16px 0 0' }}
      >
        <div style={{ marginBottom: '20px', fontSize: '18px', fontWeight: 'bold', textAlign: 'center' }}>分享到</div>
        <div style={{ display: 'flex', justifyContent: 'space-around', marginBottom: '30px' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer' }} onClick={() => handleShare('wechat')}>
            <div style={{ fontSize: '32px', marginBottom: '10px' }}>👨‍👩‍👧‍👦</div>
            <div>微信</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer' }} onClick={() => handleShare('weibo')}>
            <div style={{ fontSize: '32px', marginBottom: '10px' }}>📱</div>
            <div>微博</div>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer' }} onClick={() => handleShare('copy')}>
            <div style={{ fontSize: '32px', marginBottom: '10px' }}>📋</div>
            <div>复制链接</div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', cursor: 'pointer' }} onClick={() => handleShare('more')}>
            <div style={{ fontSize: '32px', marginBottom: '10px' }}>📤</div>
            <div style={styles.shareText}>分享</div>
          </div>
        </div>
        <div style={{ width: '100%', padding: '10px 0', textAlign: 'center', borderTop: '1px solid #eee', cursor: 'pointer' }} onClick={closeSharePopup}>
          取消
        </div>
      </Popup>

      {/* 评论区域 */}
      <div style={styles.commentsSection}>
        <h2 style={styles.commentsTitle}>全部评论</h2>
        {comments.length > 0 ? (
          <div style={styles.commentsList}>
            {comments.map((comment) => (
              <div key={comment._id} style={styles.commentItem}>
                <img
                  src={comment.avatarImage || 'default-avatar.png'}
                  alt={comment.username}
                  style={{ ...styles.commentAvatar, cursor: 'pointer' }}
                  onClick={() => navigate(`/user-detail/${comment.userId}`)}
                  onError={(e) => {
              // 如果本地存储的头像加载失败，回退到默认头像
              (e.target as HTMLImageElement).src = "";
            }}
                />
                <div style={styles.commentContent}>
                  <div style={styles.commentHeader}>
                    <span style={{ ...styles.commentUsername, cursor: 'pointer' }} onClick={() => navigate(`/user-detail/${comment.userId}`)}>{comment.username}</span>
                    <span style={styles.commentTime}>{formatTimeDifference(comment.createdAt)}</span>
                  </div>
                  <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                    <p style={styles.commentText}>{comment.content}</p>
                    <span
                      style={{ ...styles.commentLike, color: commentLiked[comment._id] ? '#FF6B6B' : '#999' }}
                      onClick={() => handleCommentLike(comment._id)}
                    >
                      👍 {comment.likeCount || 0}
                    </span>
                  </div>

                </div>
              </div>
            ))}
          </div>
        ) : (
          <div style={styles.noComments}>
            <p>没有更多了~</p>
          </div>
        )}
      </div>

      {/* 评论输入框 */}
      <div style={styles.commentInputContainer}>
        <textarea
          style={styles.commentInput}
          placeholder="添加评论......"
          value={commentContent}
          onChange={(e) => setCommentContent(e.target.value)}
          rows={1}
        />
        <button
          style={styles.sendButton}
          onClick={submitComment}
        >
          发送
        </button>
      </div>

      {/* 评论对话框 */}
      <Dialog
        visible={showCommentDialog}
        onClose={() => setShowCommentDialog(false)}
        title="发表评论"
        confirmText="发送"
        onConfirm={submitComment}
        cancelText="取消"
        onCancel={() => setShowCommentDialog(false)}
      >
        <div style={{ padding: '10px 0' }}>
          <textarea
            style={{ width: '100%', padding: '10px', border: '1px solid #ddd', borderRadius: '6px', fontSize: '14px', resize: 'none', boxSizing: 'border-box' }}
            placeholder="写下你的评论..."
            value={commentContent}
            onChange={(e) => setCommentContent(e.target.value)}
            rows={4}
          />
        </div>
      </Dialog>
    </div>
  );
};

const styles = {
  container: {
    width: '100%',
    maxWidth: '100%',
    fontFamily: 'Arial, sans-serif',
    backgroundColor: '#FFFFFF',
    minHeight: '100vh',
    overflowX: 'hidden',
    boxSizing: 'border-box',
    position: 'relative',
    margin: '0 auto',
    paddingBottom: '60px', // 为底部评论输入框留出空间
  },
  header: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: '15px 16px',
    backgroundColor: '#FFFFFF',
    boxShadow: '0 1px 0 rgba(0,0,0,0.1)',
    position: 'sticky',
    top: 0,
    zIndex: 100,
  },
  backIcon: {
    fontSize: '20px',
    color: '#333',
    cursor: 'pointer',
  },
  title: {
    fontSize: '18px',
    fontWeight: 'bold',
    color: '#333',
  },
  placeholder: {
    width: '20px',
  },
  dongtaiContent: {
    padding: '16px',
    borderBottom: '1px solid #F0F0F0',
  },
  userInfo: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '12px',
  },
  avatar: {
    width: '40px',
    height: '40px',
    borderRadius: '50%',
    objectFit: 'cover',
    marginRight: '12px',
  },
  userInfoText: {
    flex: 1,
  },
  userName: {
    fontSize: '16px',
    fontWeight: 'bold',
    color: '#333',
    marginBottom: '2px',
  },
  publishTime: {
    fontSize: '12px',
    color: '#999',
  },
  content: {
    fontSize: '16px',
    color: '#333',
    lineHeight: '1.5',
    marginBottom: '12px',
  },
  mediaContainer: {
    display: 'flex',
    flexWrap: 'wrap',
    gap: '8px',
    marginBottom: '12px',
  },
  mediaImage: {
    width: '48%',
    height: 'auto',
    borderRadius: '8px',
    objectFit: 'cover',
  },
  mediaVideo: {
    width: '100%',
    height: 'auto',
    borderRadius: '8px',
    backgroundColor: '#000',
    maxHeight: '200px',
  },
  topicTag: {
    display: 'inline-block',
    padding: '4px 8px',
    backgroundColor: '#FFECF0',
    color: '#FF6B6B',
    fontSize: '12px',
    borderRadius: '4px',
    marginBottom: '12px',
  },
  interactionBar: {
    display: 'flex',
    justifyContent: 'space-around',
    padding: '10px 0',
    borderTop: '1px solid #F0F0F0',
    borderBottom: '1px solid #F0F0F0',
  },
  interactionIcon: {
    display: 'flex',
    alignItems: 'center',
    fontSize: '16px',
    color: '#666',
  },
  commentsSection: {
    padding: '16px',
    backgroundColor: '#F9F9F9',
    borderRadius: '12px',
    margin: '16px',
    boxShadow: '0 2px 8px rgba(0,0,0,0.05)',
  },
  commentsTitle: {
    fontSize: '16px',
    fontWeight: 'bold',
    color: '#333',
    marginBottom: '16px',
    paddingBottom: '8px',
    borderBottom: '1px solid #EEEEEE',
  },
  commentsList: {
    width: '100%',
  },
  commentItem: {
    display: 'flex',
    marginBottom: '16px',
    padding: '12px',
    backgroundColor: '#FFFFFF',
    borderRadius: '8px',
    boxShadow: '0 1px 3px rgba(0,0,0,0.05)',
    transition: 'transform 0.2s, box-shadow 0.2s',
  },

  commentAvatar: {
    width: '40px',
    height: '40px',
    borderRadius: '50%',
    objectFit: 'cover',
    marginRight: '12px',
    border: '2px solid #F0F0F0',
  },
  commentContent: {
    flex: 1,
  },
  commentHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '6px',
  },
  commentUsername: {
    fontSize: '14px',
    fontWeight: 'bold',
    color: '#333',
  },
  commentTime: {
    fontSize: '12px',
    color: '#999',
  },
  commentText: {
    fontSize: '14px',
    color: '#333',
    lineHeight: '1.6',
    marginBottom: '8px',
    wordBreak: 'break-word',
  },
  commentLike: {
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    transition: 'color 0.2s',
    padding: '4px 8px',
    borderRadius: '16px',
    backgroundColor: 'transparent',
    '&:hover': {
      backgroundColor: 'rgba(255,107,107,0.1)',
    },
  },
  noComments: {
    textAlign: 'center',
    color: '#999',
    padding: '20px 0',
  },
  commentInputContainer: {
    display: 'flex',
    alignItems: 'center',
    padding: '8px 16px',
    backgroundColor: '#FFFFFF',
    borderTop: '1px solid #F0F0F0',
    position: 'fixed',
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 100,
  },
  commentInput: {
    flex: 1,
    padding: '8px 12px',
    border: '1px solid #ddd',
    borderRadius: '20px',
    fontSize: '14px',
    resize: 'none',
    boxSizing: 'border-box',
    marginRight: '10px',
  },
  sendButton: {
    padding: '6px 12px',
    backgroundColor: '#FF6B6B',
    color: 'white',
    border: 'none',
    borderRadius: '20px',
    fontSize: '14px',
    cursor: 'pointer',
  },
  loadingState: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '40px 20px',
    minHeight: '300px',
  },
  spinner: {
    width: '40px',
    height: '40px',
    border: '4px solid #f3f3f3',
    borderTop: '4px solid #FF6B6B',
    borderRadius: '50%',
    animation: 'spin 1s linear infinite',
    marginBottom: '20px',
  },
  loadingText: {
    fontSize: '15px',
    color: '#999',
  },
  emptyState: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    padding: '40px 20px',
    minHeight: '300px',
  },
  emptyText: {
    fontSize: '15px',
    color: '#999',
    marginBottom: '20px',
  },
  backButton: {
    padding: '8px 16px',
    backgroundColor: '#FF6B6B',
    color: 'white',
    border: 'none',
    borderRadius: '4px',
    fontSize: '14px',
    cursor: 'pointer',
  },
};

// 添加CSS动画
const styleSheet = document.createElement('style');
styleSheet.textContent = `
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
`;
document.head.appendChild(styleSheet);

export default DongtaiDetail;